import React from 'react';
import { connect } from 'react-redux';
import { Row, Col, Button, Transfer } from 'antd';
import { fetchUsers,fetchTags,fetchGroups } from "../../../actions/usersActions";

import "./style.css";

var dataSource = {users:[],groups:[],tags:[]} ; 
class AdminUsersSelector extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      targetKeys:{users:[],groups:[],tags:[]},
      sourceData:{users:[],groups:[],tags:[]},
      selectedKeys: [],
      type:"", //users , groups ,tags 
    };
  }

  componentWillMount(){
    var data = this.props.value.data;
    var type = this.props.value.type;
    var targetKeys = this.state.targetKeys; 
    if ( !data ) {
      return ;
    } 
    // for(let i = 0 ; i < data.length ; i++){
    //    targetKeys[type].push(data[i].id);
    // }
    console.log(data);
    targetKeys[type] = data ; 
    console.log("targetKeys[type]",targetKeys)
    switch (type) {
      case 'users' : this.loadUsers() ;break;
      case 'groups': this.loadGroups();break;
      case 'tags' : this.loadTags();break;
      default:;
    }
    this.setState({targetKeys});
  }

  loadUsers  = () => {
    const users = this.state.sourceData.users ; 
    if ( users.length < 1 ) {
      this.props.fetchUsers("email").then(
          (data) => {  this.wrapData("users",data,"email");this.setState({type:"users"});   },
          (err) => {  console.log(err);  }
         );
    }else{
      this.setState({type:"users"});
    }
  }

  loadGroups = () =>{
    const groups = this.state.sourceData.groups ; 
    if ( groups.length < 1 ) {
      this.props.fetchGroups("name").then(
            (data) =>{ this.wrapData("groups",data,"name"); this.setState({type:"groups"});  },
            (err) => { console.log(err);  }
          );
    }else{
      this.setState({type:"groups"}); 
    }
  }

  loadTags = () => {
    const tags = this.state.sourceData.tags ; 
    if ( tags.length < 1 ) {
      this.props.fetchTags("name").then(
            (data) =>{ this.wrapData("tags",data,"name"); this.setState({type:"tags"});  },
            (err) => { console.log(err);  }
          );
    }else{
       this.setState({type:"tags"});
    }
  }

  wrapData = (type,sourceData,title) => {
    var data = this.state.sourceData ;
    if (!sourceData) {
      data[type] = [];
    }else{
        for ( let i =0 ; i < sourceData.length ; i++) {
          data[type].push({
            key: sourceData[i].id,
            title: sourceData[i][title],
            description: ``,
          });
      }
    }
    dataSource = data;
  }

  handleChange = (targetKeys) => {
      const type = this.state.type ; 
      var keys = this.state.targetKeys;
      keys[type] = targetKeys;
      this.setState({ targetKeys:keys });
      this.props.onChange({ type , keys:targetKeys } );
  }

  render() {
    const state = this.state;
    const type = state.type;
    return (
        <div id="users-selector">
          <Row>
            <div className="users-selector-actions" style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}>
                <Button type="dashed"  onClick={this.loadUsers}>用户</Button>
                <Button type="dashed"  onClick={this.loadGroups}>组</Button>
                <Button type="dashed"  onClick={this.loadTags}>标签</Button>
              </div>
          </Row>
          
          <Row>
            <Col span={24}>
              <Transfer
                showSearch
                dataSource={dataSource[type]}
                titles={['Source', 'Target']}
                targetKeys={state.targetKeys[type]}
                onChange={this.handleChange}
                render={item => item.title}
                listStyle={{
                  width: 250,
                  height: 500,
                }}
              />
            </Col>
          </Row>
        </div>
    );
  }
}

AdminUsersSelector.propTypes = {
    fetchUsers: React.PropTypes.func.isRequired,
    fetchGroups: React.PropTypes.func.isRequired,
    fetchTags: React.PropTypes.func.isRequired,
};

const mapStateToProps = (state) => {
  return {
     users: state.user.users,
     groups: state.user.groups,
     tags: state.user.tags,
   }
}

export default connect(mapStateToProps,{ fetchUsers,fetchGroups,fetchTags })(AdminUsersSelector);